<template>
<div id="m1">
	<el-row v-show="what == 'login'" :gutter="20" style="margin-top:100px;">
		<el-col :xs="1" :md="16">&nbsp;</el-col>
	  	<el-col :xs="22" :md="7">
	  		<el-card class="box-card">
	  			<div slot="header" >
				    登录
				</div>
			  	<el-form :model="form" label-width="80px">
					<el-form-item label="用户名">
						<el-input v-model="form.username" ref="username"
						@keyup.enter.native="gogo"
						></el-input>
					</el-form-item>

					<el-form-item label="密码">
						<el-input type="password" v-model="form.password"
						@keyup.enter.native="gogo"
						></el-input>
					</el-form-item>

					

				  	<el-form-item >
				    	<el-button type="primary" @click="gogo">登录</el-button>
				    	<!-- <el-button @click="toregister">注册</el-button> -->
				  	</el-form-item>

				</el-form>
			</el-card>
	  	</el-col>
	</el-row>


<el-dialog
  title="欢迎注册"
  :visible.sync="dialogVisible"
  width="60%">
  	<el-form :model="form" status-icon :rules="rules2" ref="form" 
  	label-width="180px">
		<el-form-item label="商城名:" prop="name">
			<el-input v-model="form.name" style="width:350px;"
			placeholder="商城名称，2到10个字，以后可以更改"
			></el-input>
		</el-form-item>

		<el-form-item label="电话:" prop="mobile">
			<el-input placeholder="作为登录账号，以后可以更改" v-model="form.mobile" 
			 style="width:350px;">
		    	<el-button slot="append" @click.native="sendsmscode">获取验证码</el-button>
		  	</el-input>
		</el-form-item>

		<el-form-item label="短信验证码:" prop="smsCode">
			<el-input v-model="form.smsCode" style="width:350px;"></el-input>
		</el-form-item>

		<el-form-item label="密码:" prop="pass">
			<el-input type="password" v-model="form.pass" style="width:350px;"></el-input>
		</el-form-item>

		<el-form-item label="再次输入密码:" prop="checkPass">
			<el-input type="password" v-model="form.checkPass" style="width:350px;"></el-input>
		</el-form-item>

		<el-form-item label="验证码:" prop="code">
			<el-input v-model="form.code" 
			style="width:100px;" class="fl"></el-input>
			<div class="fl pointer" v-html="imageCodeInfo.data" 
			@click="getImageCode"></div>
		</el-form-item>

		<el-form-item label="" >
			<el-button type="primary" style="width:350px;" @click="register">注册</el-button>
		</el-form-item>

	</el-form>
  <!-- <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span> -->
</el-dialog>



</div>  		
</template>

<script>

import { mapGetters } from 'vuex'
//import { login } from '../../service/api'
//import { setCookie, getCookie} from '../../config/util'
import http from '@/common/http';
import util from '@/common/util';

export default {
	name: 'login',
	data () {

		var validatePass = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (this.form.checkPass !== '') {
					this.$refs.form.validateField('checkPass');
				}
				callback();
			}
		};

		var validatePass2 = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请再次输入密码'));
			} else if (value !== this.form.pass) {
				callback(new Error('两次输入密码不一致!'));
			} else {
				callback();
			}
		};


		var validateSmsCode = (rule, value, callback) => {
			if(this.form.mobile == ''){
				this.$refs.form.validateField('mobile');
			}
			else if (value === '') {
				callback(new Error('请输入短信验证码'));
			} else {
				this.checkSmsCode(value, callback);
			}
		};

		var validateCode = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入图形验证码'));
			} else {
				this.checkCode(value, callback);
			}
		};

		var validateMobile = (rule, value, callback) => {
			if (value === '') {
				callback(new Error('请输入电话'));
			} else {
				if(!/^[0-9]+$/.test(value)) {
					callback(new Error('请输入数字'));
				}else{
					callback();
				}
				
			}
		};


		return {
			
		  	form : {
		  		username : '',
		  		password : '',
		  		name : '',
		  		mobile : '',
		  		smsCode : '',
		  		code : '',
		  		pass: '',
          		checkPass: '',
		  	},

		  	dlq : '测试',

		  	what : 'login',

		  	imageCodeInfo : {},

		  	dialogVisible : false,

		  	rules2: {
		  	  name: [
	            { required: true, message: '请输入商城名称', trigger: 'blur' },
	            { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
	          ],
	          mobile: [
	          	{ required: true, message: '请输入电话', trigger: 'blur' },
	            { validator: validateMobile, trigger: 'blur' }
	          ],
	          // smsCode: [
	          // 	{ required: true, message: '请输入短信验证码', trigger: 'blur' },
	          //   { validator: validateSmsCode, trigger: 'blur' }
	          // ],
	          pass: [
	          	{ required: true, message: '请输入密码', trigger: 'blur' },
	            { validator: validatePass, trigger: 'blur' }
	          ],
	          checkPass: [
	          	{ required: true, message: '请再次输入密码', trigger: 'blur' },
	            { validator: validatePass2, trigger: 'blur' }
	          ],
	          // code: [
	          // 	{ required: true, message: '请输入图形验证码', trigger: 'blur' },
	          //   { validator: validateCode, trigger: 'blur' }
	          // ],
	          
	        },
		}
	},

	components: {

		
	},

	computed : {
		
	},

	methods : {

		checkSmsCode (value, callback) {
			const para = {
				fun : 'getRegisterSmsCode',
				mobile : this.form.mobile,
				cb : res => {
					if(res == null){
						callback(new Error('短信验证码已经过期'));
					}
					else if(value == res){
						callback();
					}else{
						callback(new Error('短信验证码输入有误'));
					}
				}
			};
			this.$store.dispatch('update', para);
		},

		checkCode (value, callback) {
			if(this.imageCodeInfo.text.toUpperCase() != this.form.code.toUpperCase()){
				callback(new Error('图形验证码输入有误'));
			}else{
				callback();
			}
		},

		gogo () {

			console.log('gogo');

			var para = {
				fun : 'login',
				username : this.form.username,
				password : this.form.password,
				requestType : 'get',
				cb : res => {
					console.log(res);

					//已经登录过了。
					// if(res == '1'){
						this.$router.push({ 
							name: 'dashboard', 
						});
					// }
				},
				err : res => {
					this.$notify.error({
			          title: '错误',
			          message: res,
			        });
				},
			};

			http(para);

		},

		register () {
			this.$refs['form'].validate((valid) => {
				if (valid) {

					const para = {
						fun : 'createRegisterOne',
						name : this.form.name,
						mobile : this.form.mobile,
						password : this.form.pass,
						cb : res => {
							console.log(res);

							this.$notify({
					          title: '成功',
					          message: '注册成功，请登录后继续完善信息',
					          type: 'success'
					        });

					        this.dialogVisible = false;
						}
					};

					console.log(para);

					this.$store.dispatch('update', para);


				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},


		toregister () {
			this.dialogVisible = true;
			this.getImageCode();
		},

		

		sendsmscode () {

			console.log('sendsmscode');

			const para0 = {
				fun : 'getInfoByMobile',
				mobile : this.form.mobile,
				cb : res => {
					if(res == 1){
						this.$notify.error({
				          title: '错误',
				          message: '这个手机号已经注册过了。'
				        });
				        return;
					}

					const para = {
						fun : 'sendRegisterSmsCode',
						mobile : this.form.mobile,
						cb : res => {
							console.log(res);
							this.$notify({
					          title: '成功',
					          message: '发送成功',
					          type: 'success'
					        });


						}
					};

					this.$store.dispatch('update', para);
				}
			};

			this.$store.dispatch('update', para0);
		},

		getImageCode () {
			const para = {
				fun : 'getImageCode',
				options : {
					width : 100,
					height : 40,
					fontSize : 40,
					ignoreChars: '0o1iIlL',
				},
				cb : res => {
					//console.log(res);
					this.imageCodeInfo = res;
				}
			};

			this.$store.dispatch('update', para);
		},

		doSomething () {

			console.log('doSomething');
		},
	},

	watch:{
	    
	},

	mounted () {
		this.$refs['username'].focus()
	},

}
</script>

<style scoped>
svg {
	width: 100px;
	height: 30px;
}

#m1 {
	/*min-width: 1024px;*/
	max-width: 1380px;
}
</style>
